<template>
  <view class="talent-tree">
    <!-- <up-subsection
        :list="subSectionList"
        mode="subsection"
        :current="curSubSection"
        :font-size="rpx2px(31)"
        @change="handleSubsectionChange"
    /> -->

    <view class="top-box">
      <!-- <view class="header-left" @click="goBack">
        <uni-icons type="left" size="25"></uni-icons>
      </view> -->
      <view
        v-for="(item, index) in subSectionList"
        :class="curSubSection == index ? 'curSubSection' : ''"
        @click="handleSubsectionChange(index)"
        class="section"
        :key="item"
        >{{ item }}
      </view>
    </view>
    <view class="honor-detail" v-if="curSubSection === 0">
      <!-- {{ growBadgeTabs }} -->
      <up-tabs
        :list="growBadgeTabsList"
        :current="curGrowBadgeTab"
        :line-width="rpx2px(72)"
        :lineColor="'#00B588'"
        :line-height="rpx2px(9)"
        :itemStyle="growBadgeTabStyle"
        @change="handleGrowBadgeTabChange"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />

      <view class="badge-box" v-if="curGrowBadgeName === '省部级'">
        <view
          class="badge-item green"
          v-for="(item, idx) in badgeList"
          :key="idx"
        >
          <text class="badge_content">
            {{ item.provincialLevel }}
          </text>
        </view>
      </view>
      <view class="badge-box" v-if="curGrowBadgeName === '国家级'">
        <view
          class="badge-item green"
          v-for="(item, idx) in badgeList"
          :key="idx"
        >
        <text class="badge_content">
          {{ item.nationalLevel }}
          </text>
        </view>
      </view>
      <view class="badge-box" v-if="curGrowBadgeName === '市级'">
        <view
          class="badge-item green"
          v-for="(item, idx) in badgeList"
          :key="idx"
        >
        <text class="badge_content">
          {{ item.cityLevel }}
          </text>
        </view>
      </view>
    </view>
    <view class="honor-detail" v-if="curSubSection === 1">
      <view class="badge-box">
        <view
          class="badge-item green"
          v-for="(item, idx) in enterpriseHonorBadgeList"
          :key="idx"
        >
        <text class="badge_content">
          {{ item.industryHonor }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px } from "@/utils/utils";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  getEnterpriseHonorApi,
  getTalentTreeDataApi,
} from "@/api/honour/talent-tree";
import Tag from "@/package_honour/pages/honour/components/tag.vue";

const subSectionList = ref(["升级荣誉", "行业荣誉"]);
const curSubSection = ref(0);
const handleSubsectionChange = (idx) => {
  console.log(idx, "index");
  curSubSection.value = idx;
};

const growBadgeTabs = ref([]);
const growBadgeTabsList = ref([]);
const curGrowBadgeTab = ref(0);
const curGrowBadgeName = ref("市级");
const growBadgeTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
};
const badgeList = ref([]);
const handleGrowBadgeTabChange = (tab) => {
  curGrowBadgeTab.value = tab.index;
  curGrowBadgeName.value = tab.name;
  const findList = growBadgeTabs.value.find(
    (item) => item.name === curGrowBadgeName.value
  );
  badgeList.value = findList.list;
};
const enterpriseId = ref("");
const getTalentTreeData = async () => {
  await uni.showLoading({
    title: "数据加载中...",
  });
  const res = await getTalentTreeDataApi(enterpriseId.value);
  const { code, data } = res;
  if (code === 200) {
    for (let key in data) {
      growBadgeTabs.value.push({
        name: key,
        list: data[key],
      });
    }
    growBadgeTabsList.value = [
      {
        index: 0,
        name: "国家级",
      },
      {
        index: 1,
        name: "省部级",
      },
      {
        index: 2,
        name: "市级",
      },
    ];
    handleGrowBadgeTabChange({
      index: 2,
      name: "市级",
    });
    uni.hideLoading();
  }
};

function goBack() {
  uni.navigateBack({
    delta: 1, // 返回的页面数，这里表示返回上一页
  });
}
const enterpriseHonorBadgeList = ref([]);
const getEnterpriseHonorData = async () => {
  const res = await getEnterpriseHonorApi(enterpriseId.value);
  const { code, data } = res;
  if (code === 200) {
    enterpriseHonorBadgeList.value = data;
  }
};
onLoad(() => {
  uni.hideNavigationBarLoading();
});
onShow(() => {
  /* #ifdef MP-WEIXIN */
  enterpriseId.value = getUrlParamsInWeixin()?.enterpriseId;
  /* #endif */

  /* #ifdef H5 */
  enterpriseId.value = getUrlParamsInH5()?.enterpriseId;
  /* #endif */
  getTalentTreeData();
  getEnterpriseHonorData();
});
</script>
<style scoped lang=less>
.talent-tree {
  padding-top: 50rpx;

  :deep(.u-subsection) {
    width: 80%;
    margin: 0 auto 0 auto;
    z-index: 999;
  }

  .top-box {
    padding: 10rpx 0;
    width: 100vw;
    display: flex;
    flex: 2 1;
    justify-content: center;

    color: @color-black;
    font-size: 25rpx;
    position: relative;
    .header-left {
      height: 40rpx;
      position: absolute;
      left: 20rpx;
    }
    .section {
      margin: 0 20rpx;
      font-size: 30rpx;
      &.curSubSection {
        font-size: 30rpx;
        font-weight: bold;
      }
    }
  }

  .honor-detail {
    padding-left: 28rpx;
    padding-right: 50rpx;

    .badge-box {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      height: 100%;

      :deep(.badge-item) {
        width: 296rpx;
        min-height: 60rpx;
        padding: 20rpx 15rpx;
        border: 1rpx solid @color-green;
        border-radius: 7rpx;
        font-size: 23rpx;
        color: @color-green;
        text-align: center;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        // overflow: hidden;
        margin: 10rpx 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        &.green {
          border: 1rpx solid @color-grey;
          color: @color-grey;
        }

        &.grey {
          display: flex;
          justify-content: space-around;
          align-items: center;
          border: 1px solid @color-grey;
          color: @color-grey;

          .text {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .u-icon {
            margin-left: 18rpx;
          }
        }
      }
    }
  }
}
</style>